<template>
  <common-view class="index-page">
    <design-view>
      <img src="../assets/img/index/title.png" alt="" class="title animate__animated animate__bounceIn"/>
      <img src="../assets/img/index/sub_title.png" alt="" class="sub_title animate__animated animate__bounceInLeft"/>
      <img src="../assets/img/index/line_heart.png" alt="" class="line_heart "/>
      <img src="../assets/img/index/desc.png" alt="" class="desc animate__animated animate__bounceInRight"/>
      <div class="rule_btn btn" @click="onRule"></div>
      <img src="../assets/img/index/box.png" alt="" class="box"/>
    </design-view>
    <img src="../assets/img/index/arrow_btn.png" alt="" class="arrow_btn"/>
    <van-popup class="popup"
               position="center"
               v-model="showPopup"
               get-container="body">
      <transition name="fade">
        <component :is="popup" @toggle="togglePopup"></component>
      </transition>
    </van-popup>
  </common-view>
</template>

<script>
import RuleView from '@/views/RuleView'
import { Popup } from 'vant'

export default {
  name: 'IndexView',
  components: {
    [Popup.name]: Popup,
    rule: RuleView
  },
  data () {
    return {
      showPopup: false,
      popup: '',
      cacheKey: 'yx_rule' + new Date().getDate()
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    onRule () {
      this.togglePopup('rule')
      this.$sound && this.$sound.play()
    },
    init () {
    },
    // 切换弹出框
    togglePopup (name = '') {
      this.showPopup = false
      this.popup = ''
      if (name) {
        this.popup = name
        this.showPopup = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../assets/css/mixin.scss";

.index-page {
  text-align: center;
  background: url(../assets/img/index/index_bg.jpg) center center;
  background-size: cover;
  font-size: 0px;
  .title {
    margin: 68px auto 0;
    @include wh(514, 208);
  }
  .sub_title {
    @include wh(409, 203);
    margin: 76px auto 9px;
  }
  .line_heart {
    @include wh(531, 40);
  }
  .desc {
    @include wh(610, 249);
    margin: 11px auto 0;
  }
  .rule_btn {
    @include wh(50, 155);
    @include rt(0, 181);
    background: url(../assets/img/index/rule_btn.png) center;
    background-size: 100% 100%;
  }
  .box {
    @include wh(750, 646);
    @include abs_bottom(0)
  }
  .arrow_btn {
    @include wh(145, 38);
    @include abs_bottom(23);
    animation: arrow_btn_aniamtion 1s infinite alternate ease-in;
  }
}
@keyframes arrow_btn_aniamtion {
  0% {
    transform: translate3d(0, 0%, 0)
  }
  100% {
    transform: translate3d(0, 50%, 0)
  }
}
</style>
